<template>
  <div class>
    <el-card class="ep-card ep-search">
      <el-form :model="searchForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="10">
              <el-form-item label="用户名称" size="small"> 
                <el-input v-model="searchForm.userName" placeholder="请输入用户名称" :clearable="true"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="请求状态" size="small">
              <el-select v-model="searchForm.status" placeholder="请选择状态" :clearable="true">
                <el-option label="成功" :value="1"></el-option>
                <el-option label="失败" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" size="small" icon="el-icon-search" @click="init">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-table :data="tableData" border style="width: 100%" size="mini">
      <el-table-column prop="userName" label="用户名" align="center" width="100"></el-table-column>
      <el-table-column
        prop="logType"
        label="日志类型"
        align="center"
        width="120"
        :formatter="getLogTypeName"
      ></el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        align="center"
        width="120"
        :formatter="getStatusName"
      ></el-table-column>
      <el-table-column prop="content" label="日志内容" align="center" width="120">
         <template slot-scope="scope">
          <div :title="scope.row.content" class="overFlow">{{scope.row.content}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="idAddress" align="center" label="操作IP"></el-table-column>
      <el-table-column prop="browser" align="center" label="浏览器">
        <template slot-scope="scope">
          <div :title="scope.row.browser" class="overFlow">{{scope.row.browser}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        type="date"
        label="创建时间"
        :formatter="dateFormatter"
        width="140"
      ></el-table-column>
      <el-table-column label="操作" width="80x" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="showLogDialog(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-card style="text-align:right;">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="[ 10, 20,30, 40]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- --------------------------------------------------------查看 -->
    <el-dialog class="myDialog" title="登录日志信息" :visible.sync="dialogLogVisible" :close-on-click-modal="false" width="500px">
      <el-form>
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="logForm.userName" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="请求状态" :label-width="formLabelWidth">
        <el-input v-model="logForm.status" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日志内容" :label-width="formLabelWidth">
          <el-input type="textarea" rows="3" v-model="logForm.content" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="操作IP" :label-width="formLabelWidth">
          <el-input v-model="logForm.idAddress" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="浏览器" :label-width="formLabelWidth">
        <el-input type="textarea" rows="3" v-model="logForm.browser" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-input v-model="logForm.createTime" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
      
<script>
import {
  getLogTypeName,
  getStatusName,
  dateFormatter
} from "@/pages/log/function.js";
export default {
  components: {},
  data() {
    return {
      logForm: {},
      formLabelWidth: '100px',
      dialogLogVisible: false,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableData: [],
      searchForm: {
        userName: "",
        status: ""
      }
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    showLogDialog(index, row) {
      this.logForm = {};
      this.logForm.userName = row.userName;
      this.logForm.status = "1" == row.status ? "成功" : "失败";
      this.logForm.content = row.content;
      this.logForm.idAddress = row.idAddress;
      this.logForm.browser = row.browser;
      let col = {};
      col.property = 'createTime';
      this.logForm.createTime = this.dateFormatter(row, col);
      this.dialogLogVisible = true;
    },
    getLogTypeName(row, column) {
      return getLogTypeName(row, column);
    },
    getStatusName(row, column) {
      return getStatusName(row, column);
    },
    dateFormatter(row, column) {
      return dateFormatter(row, column);
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize;
      this.init();
    },
    currentChange(currentPage) {
      this.currentPage = currentPage;
      this.init();
    },
    init() {
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        userName: this.searchForm.userName,
        status: this.searchForm.status,
        logType: "1"
      };
      this.$api
        .formPost( "/api/log/collect/doGetList2", params)
        .then(res => {
          if (res.retHead.code === "0000000") {
            this.tableData = res.retBody.list;
            this.total = res.retBody.total;
          }
        });
    }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
.overFlow {
  max-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-input {
  width: 189px;
}

.myDialog .el-input {
  width: 100%;
}
</style>